<template>
  <div class="demo">
    <div class="demo-title">渲染在当前 DOM</div>
    <div class="demo-content">
      Render in this
      <div style="margin-top: 16px">
        <Button type="primary" @click="showDrawer">Open</Button>
      </div>
      <Drawer
        v-model:visible="open"
        title="Basic Drawer"
        placement="right"
        :closable="false"
        :get-container="false"
        :style="{ position: 'absolute' }"
        @close="onClose"
      >
        <p>Some contents...</p>
      </Drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Drawer from '@sscd/drawer';
  const open = ref(false);
  const showDrawer = () => {
    open.value = true;
  };
  const onClose = () => {
    open.value = false;
  };
</script>
<style lang="less" scoped>
  .demo {
    height: 200px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 48px;
    text-align: center;
    background: #fafafa;
  }
</style>
